<template>
  <el-card class="sku-list">
    <el-table :data="skuList" v-loading="loading" border style="margin-bottom:10px ;">
      <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
      <el-table-column prop="skuName" label="名称"></el-table-column>
      <el-table-column prop="skuDesc" label="描述"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{row}">
          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)"></el-table-column>
      <el-table-column prop="price" label="价格(元)"></el-table-column>
      <el-table-column label="操作" width="230">
        <template v-slot="{row}">
          <el-tooltip class="box-item" v-if="row.isSale===1" effect="dark" content="上架" placement="top">
            <el-button size="small" type="success" :icon="Top" @click="skuInfoOnSale(row)"></el-button>
          </el-tooltip>

          <el-tooltip class="box-item" v-else effect="dark" content="下架" placement="top">
            <el-button size="small" type="info" :icon="Bottom" @click="skuInfoCancelSale(row)"></el-button>
          </el-tooltip>

          <el-tooltip class="box-item" effect="dark" content="编辑Sku" placement="top">
            <el-button size="small" :icon="Edit" type="primary"></el-button>
          </el-tooltip>

          <el-tooltip class="box-item" effect="dark" content="查看Sku" placement="top">
            <el-button size="small" type="info" :icon="InfoFilled" @click="toCheckSkuInfo(row)"></el-button>
          </el-tooltip>

          <el-tooltip class="box-item" effect="dark" content="删除Sku" placement="top">
            <el-button size="small" type="danger" :icon="Delete" @click="deleteSkuInfo(row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3,5,7,10,15]" :small="small" :disabled="disabled" :background="background" layout=" prev, pager, next, jumper,->,sizes,total " :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 抽屉效果 -->
    <el-drawer v-model="drawer" title="查看SkuInfo" direction="rtl" size="50%">
      <el-row :gutter="10">
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuInfo.price }}.00元</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id" style="margin-right:6px;">{{attrValue.valueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag v-for="saleAttrValue in skuInfo.skuSaleAttrValueList" :key="saleAttrValue.id" style="margin-right:6px;">{{saleAttrValue.saleAttrValueName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">图片列表</el-col>
        <el-col :span="18">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="skuImg in skuInfo.skuImageList" :key="skuImg.id">
              <el-image :src="skuImg.imgUrl" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Sku'
};
</script>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { Top, Bottom, Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { reqDeleteSkuInfo, reqGetAllSkuListData, reqGetOneSkuInfoById, reqSkuInfoCancelSale, reqSkuInfoOnSale } from '@/api/product/sku';
import { ElMessage, ElMessageBox } from 'element-plus';

const currentPage = ref(1);
const pageSize = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref<number>(0);
const skuList = ref([]);
const loading = ref(true);
const skuInfo = reactive({});

const drawer = ref(false);
const drawer2 = ref(false);
const direction = ref('rtl');
const radio1 = ref('Option 1');

// 1. 根据当前页码和每页显示的数据 获取skuList数据
const getSkuListData = async () => {
  const result = await reqGetAllSkuListData(currentPage.value, pageSize.value);

  // isSale 0 上架  1 下架
  loading.value = false;
  // console.log('rr', result);
  skuList.value = result.records;
  total.value = result.total;
};

// 2. 当组件挂载完成的时候再来发送请求
onMounted(() => {
  getSkuListData();
});
// 3. 当单击页码时 改变页码
const handleCurrentChange = (val: number) => {
  loading.value = true;
  // console.log(`current page: ${val}`)
  currentPage.value = val;

  // 重新发送请求 获取数据渲染页面
  getSkuListData();
};

// 4. 每页显示的数量
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pageSize.value = val;
  // 还应该从第1页开始显示
  currentPage.value = 1;

  getSkuListData();
};

// 5. 商品的下架
const skuInfoCancelSale = async row => {
  await reqSkuInfoCancelSale(row.id);

  // console.log('下架', row);
  // row.isSale = 1;
  row.isSale = 1 - row.isSale;
  ElMessage.success('商品下架成功...');
  // 省略了请求
};

// 6. 商品的上架
const skuInfoOnSale = async row => {
  await reqSkuInfoOnSale(row.id);

  // console.log('上架', row);
  // row.isSale = 0;
  row.isSale = 1 - row.isSale;
  ElMessage.success('商品上架成功...');
  // 省略了请求
};

// 7. 删除当前的那个skuInfo
const deleteSkuInfo = async (skuId: number) => {
  await reqDeleteSkuInfo(skuId);
  ElMessage.success('删除sku成功了...');
  getSkuListData();
};

// 8. 查看SkuInfo数据
const toCheckSkuInfo = async row => {
  const result = await reqGetOneSkuInfoById(row.id);
  console.log('rr', result);
  drawer.value = true;
  Object.assign(skuInfo, result);
};
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.sku-list {
  .el-row {
    font-size: 20px;
    // height:32px;
    margin-top: 8px;
    .el-col-6 {
      text-align: right;
    }
    .el-carousel__item {
      background-color: #fff;
      text-align: center;
      .el-image {
        height: 100%;
      }
    }
  }
}
</style>